<template>
    <!-- 有声漫画 -->
    <div class="sound_cartoon">
        <div class="swipe">
            <swiper :options="swiperOptions" class="swiper">
                <swiper-slide v-for="b in bannerList" :key="b.image_url">
                    <router-link
                        :to="b.jump_url.split('bilicomic:/')[1].replace('detail', 'details')"
                        tag="div"
                    >
                        <van-image
                            width="46vw"
                            height="61.3vw"
                            radius="5px"
                            lazy-load
                            fit="cover"
                            :src="`${b.image_url}@300w.jpg`"
                        />
                    </router-link>
                </swiper-slide>
            </swiper>
        </div>
        <div class="sound_content" v-if="soundList.length">
            <div>
                <type-three
                    :todayHot="soundList[i + 1]"
                    :typeThreeID="typeThreeID[i]"
                    :typeThree="typeThree[i]"
                    v-for="(item, i) in typeThree"
                    :key="i"
                ></type-three>
            </div>
        </div>
        <van-loading v-else size="24px" vertical text-color="#0094ff" color="#0094ff"
            >加载中...</van-loading
        >
        <div class="more" v-if="ismore">没有更多啦~</div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import TypeThree from "./typeThree.vue";
export default {
    components: { Swiper, SwiperSlide, TypeThree },
    data() {
        return {
            bannerList: [],
            soundList: [],
            typeThree: [],
            typeThreeID: [],
            ismore: false,
            swiperOptions: {
                //swiper轮播图配置
                speed: 2000,
                autoplay: {
                    delay: 0,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                slidesPerView: 2,
                spaceBetween: 30,
                centeredSlides: true,
                pauseOnMouseEnter: true,
                parallax: true,
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            },
        };
    },
    created() {
        this.getSoundList();
    },
    methods: {
        async getSoundList() {
            await this.axios.get(`GetClassPageLayout?tabId=316`).then((res) => {
                this.soundList = res.layout;
                this.getBannerList();
                this.getTypeThree();
            });
        },
        async getBannerList() {
            for (let i = 0; i < this.soundList.length; i++) {
                if (this.soundList[i].type == "0") {
                    await this.axios
                        .get(`GetClassPageHomeBanner?id=${this.soundList[i].id}`)
                        .then((res) => {
                            this.bannerList = res.banner;
                        });
                }
            }
        },
        async getTypeThree() {
            for (let i = 0; i < this.soundList.length; i++) {
                if (this.soundList[i].type == "3") {
                    this.typeThreeID.push(this.soundList[i].id);
                    await this.axios
                        .get(
                            `GetClassPageSixComics?id=${this.soundList[i].id}&pageNum=1&pageSize=6&isAll=0`
                        )
                        .then((res) => {
                            this.typeThree.push(res.roll_six_comics);
                            this.ismore = true;
                        });
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.swiper {
    text-align: center;
    margin-top: 20px;
    img {
        width: 100%;
        border-radius: 10px;
    }
}
.more {
    text-align: center;
    height: 30px;
    line-height: 30px;
    opacity: 0.8;
}
</style>
